import React from 'react';
import { Row, Col, Form, Input, Button, Spin, Table, Popconfirm } from 'antd';
import moment from 'moment';
import { getJsonReactNode } from '../../../utils';
import { DEFAULT_PAGE_SIZE } from '../../../utils/constants';
import styles from '../../common.css';
import Manageplanmodal from './Manageplanmodal'
// import ExportExcel from '../../../components/ExportExcel';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 18,
  },
};

@Form.create()
class Panel extends React.Component {
  constructor(props) {
    super(props);
    this.state = { // 状态树，存储各个控件的状态值，供外部调用
      currentRecord: {}, // 定义当前行变量，通过判断变量是否有值来决定走新增 or 修改
      modalVisible: false, // 定义是否显示新增/编辑弹窗页面
      selectedRowKeys: [],
      filter: '',
      filterforpage: '',
    };
  }

  handleSearch = () => { // 查询方法
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = { // 这里格式 就是 { fixversionid: 1, projectname: xxx }
        ...getFieldsValue(),
      };
      const page = 1;
      const pageSize = 10;
      this.setState({
        filterforpage: data,
      });
      dispatch({ // 调用接口，请求数据
        type: 'analysis/fetchVersionPlan', //  models的namespace + effects的方法名，也可以是reducers的方法
        payload: {
          params: {
            ...data,
            page,
            pageSize,
          },
        },
      });
    });
  };
  handleAddPlan = () => {
    this.setState({ // 设置状态树
      currentRecord: {},  // 设置状态树中当前行对象为空，这样可通过判断对象是否为空，来决定走编辑or新增
      modalVisible: true, // 设置新增/编辑表单可见
    });
  };
  handleUpdatePlan = (record) => {
    this.setState({ // 设置状态树
      currentRecord: record,  // 设置状态树中当前行对象为空，这样可通过判断对象是否为空，来决定走编辑or新增
      modalVisible: true, // 设置新增/编辑表单可见
    });
  };
  handledeletePlan = (record) => {
    this.props.dispatch({  // 调用更新接口
      type: 'analysis/deletePlan',
      payload: {
        recordParams: record,
      },
    });
  };
  handlePageChange = ({ page, pageSize }) => {
    const { dispatch } = this.props;
    const filterforP = this.state.filterforpage;
    dispatch({
      type: 'analysis/fetchVersionPlan',
      payload: {
        params: {
          ...filterforP,
          page,
          pageSize,
        },
      },
    });
  };
  // 将获取到的接口数据进行渲染
  render() {
    const { dispatch, loading, versionPlan, paginal, form: { getFieldDecorator } } = this.props;
    // 定义表头字段及取值内容
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '版本ID',
        dataIndex: 'fixversion_id',
        key: 'fixversion_id',
      },
      {
        title: '项目名称',
        dataIndex: 'project_name',
        key: 'project_name',
      },
      {
        title: '开始时间',
        dataIndex: 'startDate',
        key: 'startdate',
        render: (text) => {
          return moment(text).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '结束时间',
        dataIndex: 'endDate',
        key: 'enddate',
        render: (text) => {
          return moment(text).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',
        render: (text) => {
          return moment(text).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '是否保存计划',
        dataIndex: 'is_savePlan',
        key: 'is_savePlan',
        render: (text) => {
          let res = '';
          switch (text) {
            case 0:
              res = '未保存'
              break;
            case 1:
              res = '已保存'
              break;
            default:
              res = text;
          }
          return res;
        },
      },
      {
        title: '是否保存结果',
        dataIndex: 'is_saveActPlan',
        key: 'is_saveActPlan',
        render: (text) => {
          let res = '';
          switch (text) {
            case 0:
              res = '未保存'
              break;
            case 1:
              res = '已保存'
              break;
            default:
              res = text;
          }
          return res;
        },
      },
      {
        title: '是否已分析',
        dataIndex: 'is_Analysis',
        key: 'is_Analysis',
        render: (text) => { // 对返回结果值进行判断，展示每种结果值对应的前端展示
          let res = '';
          switch (text) {
            case 0:
              res = '未分析'
              break;
            case 1:
              res = '已分析'
              break;
            default:
              res = text;
          }
          return res;
        },
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <div className={styles.operation}>
              <a
                onClick={() => this.handleUpdatePlan(record)}
              >
                修改
              </a>
              <Popconfirm title={'确定删除？'} onConfirm={() => this.handledeletePlan(record)}>
                <a>删除</a>
              </Popconfirm>
            </div>
          );
        },
      },
    ];
    const modalProps = {
      dispatch,
      loading,
      paginal,
      visible: this.state.modalVisible,
      currentUser: this.state.currentRecord,
      onCancel: () => {
        this.setState({
          currentRecord: {},
          modalVisible: false,
        });
      },
    };
    const paginationProps = {
      className: 'ant-table-pagination',
      pageSize: DEFAULT_PAGE_SIZE,
      showTotal: total => `共 ${total} 条`,
      current: paginal.current,
      total: paginal.totalRecord,
      onChange: (page, pageSize) => this.handlePageChange({ page, pageSize }),
    };
    // console.log(versionPlan);
    return (
      <div>
        <Row gutter={12} style={{ marginBottom: 16 }}>
          <Form>
            <Col span={6}>
              <FormItem
                label="版本ID"
                {...formItemLayout}
              >
                {getFieldDecorator('fixversion_id', {
                  initialValue: '',
                })(<Input />)}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem
                label="项目名称"
                {...formItemLayout}
              >
                {getFieldDecorator('project_name', {
                  initialValue: '',
                })(<Input />)}
              </FormItem>
            </Col>
            <Col span={6}>
              <Button
                type="primary"
                loading={loading}
                onClick={this.handleSearch}
              >
                查询
              </Button>
            </Col>
          </Form>
          <div className={styles.btnGroup}>
            <Button type="primary" onClick={this.handleAddPlan}>新增版本计划</Button>
          </div>
        </Row>
        <Table
          columns={columns}
          dataSource={versionPlan}
          loading={loading}
          rowKey={record => record.id}
          pagination={paginationProps}
          bordered
        />
        <Manageplanmodal {...modalProps} />
      </div>
    );
    // return (
    //   <div>
    //     <Table
    //       columns={columns}
    //       dataSource={versionPlan}
    //       loading={loading}
    //       rowKey={record => record.id}
    //       pagination={{
    //         pageSize: DEFAULT_PAGE_SIZE,
    //       }}
    //       bordered
    //     />
    //   </div>
    // );
  }
}

export default Panel;
